<template>
    <div class="layout"> 
        <div class="sidebar">
            <el-menu class="sidebar-el-menu" :default-active="$route.path" :collapse="collapse" background-color="#324157"
                text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>    
                <el-menu-item index="/sys"><i class="el-icon-message"></i>首页</el-menu-item>  
                <el-menu-item :index="item.router"   v-for="(item,index) of user.menus" :key="index">
                    <i class="el-icon-message"></i>{{item.name}}
                </el-menu-item>
            </el-menu>       
        </div>
        <!-- 配置到嵌套路由到这里显示 -->
        <div  class="mains">
            <router-view></router-view>
            <img src="http://image.weharvest.com/upload/enterprise/cover/1478164723037.jpg" v-if="$route.path =='/sys'">
        </div>
    </div>
</template>

<script>
 import {mapState} from 'vuex';
export default {
    computed:{
        onRoutes(){
            return this.$route.path.replace('/','');
        }
    },
    data() {
        return {
            collapse : false,
            menus: []
        }
    },
    computed : {
        ...mapState(['user'])
    }
    
}
</script>

<style lang="scss">
.layout{
    width: 100%;
    height:90%;
    display: flex;
    .sidebar{
        .el-menu{
            width: 250px;
            height: 100%;
        }
    }
    .mains{
        width: 100%;
        padding: 30px;
        background-color: #eee;
        //超长滚动条
        overflow:scroll;
        img{
            width: 100%;
            height: 100%;
        }
    }

}

</style>